<template>
    <el-main>
        <el-row class="info-line">
          <div class="data-title-block">提交人员库</div>
          <div class="import-block">
            <el-upload
              class="upload-demo"
              action="http://localhost:8081/col/impCol"
              accept=".csv"
              :before-upload="onBeforeUpload"
              :show-file-list="false"
            >
              <el-button class="import-button"
                ><i class="el-icon-s-grid"></i> 批量导入</el-button
              >
            </el-upload>
          </div>
        </el-row>
        <el-divider></el-divider>
        <div class="search-block" style="float: right; display: block">
          <div class="wrapper" style="margin-right: 80%">
            <div class="search-form">
              <div
                class="autocomplete-container"
                style="height: 25px; width: 278px"
              >
                <input
                  type="text"
                  autocomplete="off"
                  name="query"
                  placeholder="搜索"
                  class="autocomplete-input"
                  style="
                    width: 200px;
                    height: 25px;
                    border-radius: 3px 0px 0px 3px;
                  "
                />
                <div
                  class="autocomplete-button"
                  style="height: 25px; line-height: 20px"
                >
                  搜索
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="peoplelist">
          <div class="data-block">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              stripe
            >
              <el-table-column type="selection" min-width="5%"> </el-table-column>
              <el-table-column prop="id" min-width="15%" label="编号">
              </el-table-column>
              <el-table-column prop="name" min-width="15%" label="姓名">
              </el-table-column>
              <el-table-column prop="phone" min-width="15%" label="手机号">
              </el-table-column>
              <el-table-column prop="phone" min-width="15%" label="微信号">
              </el-table-column>
              <el-table-column min-width="15%" label="操作">
                <template slot-scope="scope">
                  <el-button class="btn btn-danger" @click.prevent="deleteSub(scope.row)"
                    >删除</el-button
                  >
                  <el-button class="btn btn-danger" @click.prevent="disable(scope.row)"
                    >禁用</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="block" style="float: right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageObject.pageNum"
            :page-size="pageObject.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pageObject.total"
          >
          </el-pagination>
        </div>
      </el-main>
</template>

<script>
import { getSubList } from "@/api/admin.js";
import { delSub } from "@/api/brand.js";

const pageParam = {
  list: [],
  pageNum: null,
  pageSize: null,
  total: null,
  totalPage: null,
};
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageObject: null,
    };
  },

  created() {
    this.pageObject = Object.assign({}, pageParam);
    this.getPageData();
  },

  methods: {
    deleteSub(row) {
      this.$confirm("是否永久删除提交人: " + row.name + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delSub(row.id).then((response) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    disable(row) {
      this.$confirm("是否禁用提交人: " + row.name + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    
    onBeforeUpload(file) {
      const isCsv = file.type === "application/vnd.ms-excel";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isCsv) {
        this.$message.error("上传文件只能是csv文档");
      }
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过10MB");
      }
      return isCsv && isLt10M;
    },
    getPageData() {
      getSubList("", "").then((response) => {
        let data = response.data;
        this.pageObject.list = data.list;
        this.pageObject.pageNum = data.pageNum;
        this.pageObject.pageSize = data.pageSize;
        this.pageObject.total = data.total;
        this.pageObject.totalPage = data.totalPage;
        for (var i = 0; i < this.pageObject.list.length; i++) {
          let item = {};
          item.id = this.pageObject.list[i].id;
          item.name = this.pageObject.list[i].name;
          item.phone = this.pageObject.list[i].phone;
          item.wechat = this.pageObject.list[i].wechat;
          this.tableData.push(item);
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tableData.slice(0, this.tableData.length);
      getColList(this.pageObject.pageSize, this.currentPage).then(
        (response) => {
          let data = response.data;
          this.pageObject.list = data.list;
          this.pageObject.pageNum = data.pageNum;
          this.pageObject.pageSize = data.pageSize;
          this.pageObject.total = data.total;
          this.pageObject.totalPage = data.totalPage;
          for (var i = 0; i < this.pageObject.list.length; i++) {
            let item = {};
            item.id = this.pageObject.list[i].id;
            item.name = this.pageObject.list[i].name;
            item.phone = this.pageObject.list[i].phone;
            this.tableData.push(item);
          }
        }
      );
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped>

.el-main {
  background-color: #f6f6f6;
  left: 200px;
  padding: 20px;
  position: absolute;
  width: 80%;
  bottom: 0;
  top: 60px;
  min-width: 1000px;
}

.import-block {
  float: right;
}

.data-title-block {
  float: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
}

.autocomplete-input {
  padding: 9px;
  border-radius: 3px;
  font-family: inherit;
  float: left;
  font-size: 1em;
  border: 1px solid rgba(0, 0, 0, 0.19);
  margin: 0;
}

.autocomplete-button {
  font-family: inherit;
  border: none;
  background-color: #990101;
  color: white;
  padding: 8px;
  float: left;
  cursor: pointer;
  border-radius: 0px 3px 3px 0px;
  transition: all 0.2s ease-out 0s;
  margin: 0.5px 0px 0px -1px;
}
.autocomplete-button {
  background-color: #009688 !important;
}
.peoplelist {
  padding: 5px;
}

.el-table {
  margin-top: 10px;
}

.import-button {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  background-color: #009688;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  background-color: #009688;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
</style>